import React, {Component} from 'react';
import {Image, Pressable, Text, View, StyleSheet} from "react-native";
import ThButton from "../../../../components/THButton";
import {pxToDp} from "../../../../utils/styleKits";
import city from '../../../../utils/citys.json'

// 第三方选择组件
import Picker from 'react-native-picker';

// 滑块组件
import { Slider } from 'react-native-elements';

class Filter extends Component {
  constructor(props){
    super(props);
    this.state = {
      gender: '男',
      loginTime: '请选择',
      distance: 2,   // 距离
      homeLocation: '天河区',  //居住地
      education: '本科'
    }
  }
  render() {
    let {gender,loginTime,distance, homeLocation, education} = this.state;

    let boyImg = require('../../../../images/boy.png');
    let boySelImg = require('../../../../images/boy-sel.png');
    let girlImg = require('../../../../images/girl.png');
    let girlSelImg = require('../../../../images/girl-sel.png');

    return (
      <View style={{backgroundColor: '#fff', padding: 20}}>
        {/*筛选、关闭*/}
        <View style={styles.chooseBox}>
          <Text style={styles.chooseText}>筛选</Text>
          <Pressable onPress={this.props.close} style={styles.closeBox}>
            <Text style={{color:'#fff'}}>X</Text>
          </Pressable>
        </View>

        <View style={styles.chooseInfoBox}>

          {/*性别*/}
          <View style={styles.boyGirlBox}>
            <Text>性别：</Text>
            <Pressable onPress={()=>{this.changeGender('男')}}>
              <Image style={styles.boyGirl} source={gender === '男' ? boySelImg : boyImg}/>
            </Pressable>
            <Pressable onPress={()=>{this.changeGender('女')}}>
              <Image style={styles.boyGirl} source={gender === '女' ? girlSelImg : girlImg}/>
            </Pressable>
          </View>

          {/*登陆时间*/}
          <Text onPress={this.loginTime}>近期登陆时间： {loginTime}</Text>

          {/*距离*/}
          <View>
            <Text>距离：{distance}km</Text>
            <Slider
              value={distance}
              onValueChange={(data)=>{this.setDistance(data)}}
              maximumValue={100}
              minimumValue={0}
              step={1}
              thumbStyle={{ height: pxToDp(20), width: pxToDp(20)}}
            />
          </View>

          {/*居住地*/}
          <Text onPress={this.homeLocation}>居住地： {homeLocation}</Text>

          {/*学历*/}
          <Text onPress={this.education}>学历： {education}</Text>
        </View>

        <ThButton style={styles.confirm}>确认</ThButton>

      </View>
    );
  }

  // 教育
  education = () => {
    Picker.init({
      pickerData: ['博士后', '博士', '硕士', '本科', '大专', '高中', '高中以下'],
      selectedValue: ['博士后'],
      wheelFlex: [1, 0, 0], // 显示城市
      pickerConfirmBtnText: "确定",
      pickerCancelBtnText: "取消",
      pickerTitleText: "选择学历",
      onPickerConfirm: data => {
        // data =  ['博士后']
        this.setState(
          {
            education: data[0]
          }
        );
      }
    });
    Picker.show();
  };

  // 居住地选择
  homeLocation = () => {
    Picker.init({
      pickerData: city,
      selectedValue: ['北京', '北京'],
      wheelFlex: [1, 1, 0], // 显示城市
      pickerConfirmBtnText: "确定",
      pickerCancelBtnText: "取消",
      pickerTitleText: "选择城市",
      onPickerConfirm: data => {
        // data =  ['北京', '北京']
        this.setState(
          {
            homeLocation: data[1]
          }
        );
      }
    });
    Picker.show();
  };

  // 设置距离
  setDistance = (distance) =>{
    this.setState({distance})
  };

  // 近期登录时间
  loginTime = () => {
    Picker.init({
      pickerData: ['15分钟','30分钟','2小时','1个月以上'],
      selectedValue: ['15分钟'],
      wheelFlex: [1, 0, 0], // 显示登录时间
      pickerConfirmBtnText: "确定",
      pickerCancelBtnText: "取消",
      pickerTitleText: "选择时间",
      onPickerConfirm: data => {
        // data =  ['15分钟']
        this.setState(
          {
            loginTime: data[0]
          }
        );
      }
    });
    Picker.show();
  };

  // 点击改变性别
  changeGender = (gender) => {
    this.setState({
      gender
    });
  }
}

const styles = StyleSheet.create({
  // 底部弹框
  closeBox: {
    width: pxToDp(26),
    height: pxToDp(26),
    backgroundColor: '#000',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: pxToDp(15),
  },
  chooseBox: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  chooseText: {
    flex:1,
    textAlign: 'center',
    fontSize: pxToDp(20),
  },
  boyGirlBox: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: pxToDp(20),
  },
  boyGirl: {
    width: pxToDp(50),
    height: pxToDp(50),
    marginLeft: pxToDp(30),
    resizeMode: 'contain'
  },
  chooseInfoBox: {
    height: pxToDp(300),
    justifyContent: 'space-around',
  },
  confirm: {
    height: pxToDp(40),
    width: '50%',
    borderRadius: pxToDp(5),
    overflow: 'hidden',
    alignSelf: 'center',
  }
});

export default Filter;